<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>2023年秋季大型综合人才招聘会 - 详情</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 轮播图 */
    .event-carousel {
      position: relative;
      height: 200px;
      overflow: hidden;
    }
    
    .carousel-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .carousel-indicator {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      text-align: center;
    }
    
    .indicator-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.6);
      margin: 0 3px;
    }
    
    .indicator-dot.active {
      background-color: white;
    }
    
    .image-count {
      position: absolute;
      right: 10px;
      top: 10px;
      background-color: rgba(0,0,0,0.5);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
    }
    
    /* 基本信息 */
    .event-header {
      background-color: white;
      padding: 15px;
    }
    
    .event-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;
      line-height: 1.3;
    }
    
    .event-status {
      display: inline-block;
      padding: 3px 8px;
      background-color: #fff0f0;
      color: #e34c4c;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 8px;
    }
    
    .event-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 13px;
      color: #666;
      margin: 12px 0;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .event-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 10px 0;
    }
    
    .event-tag {
      padding: 4px 10px;
      background-color: #f0f7ff;
      color: #0d6efd;
      border-radius: 4px;
      font-size: 12px;
    }
    
    /* 操作按钮 */
    .action-buttons {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      gap: 10px;
      position: sticky;
      top: 57px;
      z-index: 90;
    }
    
    .primary-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .secondary-btn {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    
    /* 内容区域 */
    .content-section {
      background-color: white;
      margin-top: 10px;
      padding: 15px;
    }
    
    .section-title {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    
    .section-content {
      font-size: 15px;
      color: #555;
      line-height: 1.6;
    }
    
    .section-content p {
      margin-bottom: 10px;
    }
    
    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    
    .info-item {
      background-color: #f8f9fa;
      padding: 10px;
      border-radius: 8px;
      font-size: 14px;
    }
    
    .info-label {
      color: #888;
      font-size: 12px;
      margin-bottom: 5px;
    }
    
    /* 企业列表 */
    .company-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-top: 10px;
    }
    
    .company-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .company-logo {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      object-fit: cover;
      margin-bottom: 5px;
      background-color: #f5f5f5;
    }
    
    .company-name {
      font-size: 13px;
      color: #333;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
    
    .company-jobs {
      font-size: 11px;
      color: #888;
      margin-top: 2px;
    }
    
    /* 留言区 */
    .comments-section {
      background-color: white;
      margin-top: 10px;
      padding: 15px;
    }
    
    .comment-input-container {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .comment-input {
      flex: 1;
      border: 1px solid #eee;
      border-radius: 20px;
      padding: 8px 15px;
      font-size: 14px;
      outline: none;
    }
    
    .comment-input:focus {
      border-color: #0d6efd;
    }
    
    .comment-list {
      margin-top: 15px;
    }
    
    .comment-item {
      display: flex;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    
    .comment-item:last-child {
      border-bottom: none;
    }
    
    .comment-content {
      flex: 1;
    }
    
    .comment-author {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      margin-bottom: 3px;
    }
    
    .comment-text {
      font-size: 14px;
      color: #555;
      margin-bottom: 5px;
    }
    
    .comment-time {
      font-size: 12px;
      color: #999;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .comment-actions {
      color: #0d6efd;
      font-size: 12px;
      cursor: pointer;
    }
    
    /* 回复区 */
    .reply-list {
      margin-left: 46px;
      margin-top: 10px;
    }
    
    .reply-item {
      display: flex;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px dashed #eee;
    }
    
    .reply-item:last-child {
      border-bottom: none;
    }
    
    .reply-content {
      flex: 1;
      background-color: #f8f9fa;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 13px;
    }
    
    .reply-author {
      font-weight: 500;
      color: #333;
    }
    
    .reply-text {
      color: #555;
    }
    
    .reply-time {
      font-size: 11px;
      color: #999;
      margin-top: 3px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .reply-actions {
      color: #0d6efd;
      cursor: pointer;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-item.active {
      color: #0d6efd;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 相关推荐 */
    .related-events {
      margin-top: 10px;
      background-color: white;
      padding: 15px;
    }
    
    .related-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    
    .related-item {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .related-image {
      height: 80px;
      width: 100%;
      object-fit: cover;
    }
    
    .related-info {
      padding: 8px;
    }
    
    .related-title {
      font-size: 13px;
      font-weight: 500;
      color: #333;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .related-date {
      font-size: 11px;
      color: #888;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px;
      background-color: white;
      margin-top: 10px;
    }
    
    .load-more-btn {
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 14px;
      background-color: white;
      border: 1px solid #eee;
      color: #666;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">招聘会详情</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-share-alt"></i>
    </button>
  </div>
  
  <!-- 轮播图 -->
  <div class="event-carousel">
    <img src="https://picsum.photos/600/400?random=1" alt="招聘会现场" class="carousel-image">
    <div class="carousel-indicator">
      <span class="indicator-dot active"></span>
      <span class="indicator-dot"></span>
      <span class="indicator-dot"></span>
      <span class="indicator-dot"></span>
      <span class="indicator-dot"></span>
    </div>
    <div class="image-count">1/5</div>
  </div>
  
  <!-- 基本信息 -->
  <div class="event-header">
    <h1 class="event-title">2023年秋季大型综合人才招聘会</h1>
    <div>
      <span class="event-status">火热报名中</span>
      <span class="text-muted" style="font-size: 13px;">已有 1,243 人报名参加</span>
    </div>
    
    <div class="event-meta">
      <div class="meta-item"><i class="fa fa-calendar text-primary"></i> 2023-10-28 09:00-16:00</div>
      <div class="meta-item"><i class="fa fa-map-marker text-primary"></i> 国际会展中心</div>
      <div class="meta-item"><i class="fa fa-building-o text-primary"></i> 200+企业</div>
      <div class="meta-item"><i class="fa fa-briefcase text-primary"></i> 10000+岗位</div>
    </div>
    
    <div class="event-tags">
      <span class="event-tag">综合招聘</span>
      <span class="event-tag">全职</span>
      <span class="event-tag">应届生</span>
      <span class="event-tag">社会人才</span>
      <span class="event-tag">线下</span>
    </div>
  </div>
  
  <!-- 操作按钮 -->
  <div class="action-buttons">
    <button class="btn btn-primary primary-btn">
      <i class="fa fa-calendar-plus-o"></i> 立即报名
    </button>
    <button class="btn btn-light secondary-btn">
      <i class="fa fa-star-o"></i>
    </button>
    <button class="btn btn-light secondary-btn">
      <i class="fa fa-share-alt"></i>
    </button>
    <button class="btn btn-light secondary-btn">
      <i class="fa fa-ellipsis-v"></i>
    </button>
  </div>
  
  <!-- 活动详情 -->
  <div class="content-section">
    <h2 class="section-title">活动详情</h2>
    <div class="section-content">
      <p>2023年秋季大型综合人才招聘会是本年度规模最大的线下招聘活动之一，将有200+家企业现场招聘，提供超过10000个就业岗位。</p>
      <p>本次招聘会涵盖互联网、金融、教育、医疗、制造业、服务业等多个行业，面向应届生、社会人才、实习生等各类求职人群。</p>
      <p>求职者可免费入场，现场设有简历打印区、职业咨询区和休息区，为求职者提供全方位服务。</p>
    </div>
    
    <div class="info-grid">
      <div class="info-item">
        <div class="info-label">主办单位</div>
        <div>市人才服务中心</div>
      </div>
      <div class="info-item">
        <div class="info-label">承办单位</div>
        <div>智联招聘、前程无忧</div>
      </div>
      <div class="info-item">
        <div class="info-label">咨询电话</div>
        <div>400-123-4567</div>
      </div>
      <div class="info-item">
        <div class="info-label">交通路线</div>
        <div>地铁3号线会展中心站B口</div>
      </div>
    </div>
  </div>
  
  <!-- 参会企业 -->
  <div class="content-section">
    <h2 class="section-title">部分参会企业 <span style="font-size: 14px; font-weight: normal; color: #888;">(点击查看全部)</span></h2>
    <div class="company-list">
      <div class="company-item">
        <img src="https://picsum.photos/100/100?random=10" class="company-logo" alt="企业logo">
        <div class="company-name">科技有限公司</div>
        <div class="company-jobs">32个岗位</div>
      </div>
      <div class="company-item">
        <img src="https://picsum.photos/100/100?random=11" class="company-logo" alt="企业logo">
        <div class="company-name">金融服务集团</div>
        <div class="company-jobs">28个岗位</div>
      </div>
      <div class="company-item">
        <img src="https://picsum.photos/100/100?random=12" class="company-logo" alt="企业logo">
        <div class="company-name">教育发展中心</div>
        <div class="company-jobs">45个岗位</div>
      </div>
      <div class="company-item">
        <img src="https://picsum.photos/100/100?random=13" class="company-logo" alt="企业logo">
        <div class="company-name">健康医疗集团</div>
        <div class="company-jobs">19个岗位</div>
      </div>
      <div class="company-item">
        <img src="https://picsum.photos/100/100?random=14" class="company-logo" alt="企业logo">
        <div class="company-name">智能制造公司</div>
        <div class="company-jobs">25个岗位</div>
      </div>
      <div class="company-item">
        <img src="https://picsum.photos/100/100?random=15" class="company-logo" alt="企业logo">
        <div class="company-name">文化传媒集团</div>
        <div class="company-jobs">17个岗位</div>
      </div>
    </div>
  </div>
  
  <!-- 留言区 -->
  <div class="comments-section">
    <h2 class="section-title">留言讨论 <span style="font-size: 14px; font-weight: normal; color: #888;">(32条留言)</span></h2>
    
    <!-- 留言输入 -->
    <div class="comment-input-container">
      <img src="https://picsum.photos/100/100?random=20" class="user-avatar" alt="用户头像">
      <input type="text" class="comment-input" placeholder="分享你的想法...">
    </div>
    
    <!-- 留言列表 -->
    <div class="comment-list">
      <!-- 留言1 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=21" class="user-avatar" alt="用户头像">
        <div class="comment-content">
          <div class="comment-author">张明</div>
          <div class="comment-text">请问需要提前报名吗？还是可以直接到场参加？</div>
          <div class="comment-time">
            <span>2小时前</span>
            <span class="comment-actions">回复</span>
            <span class="comment-actions">点赞 (5)</span>
          </div>
          
          <!-- 回复列表 -->
          <div class="reply-list">
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=25" class="user-avatar" style="width: 28px; height: 28px;" alt="用户头像">
              <div class="reply-content">
                <span class="reply-author">主办方</span>
                <span class="reply-text">：可以直接到场参加，建议提前在平台预约，可优先入场。</span>
                <div class="reply-time">
                  <span>1小时前</span>
                  <span class="reply-actions">回复</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 留言2 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=22" class="user-avatar" alt="用户头像">
        <div class="comment-content">
          <div class="comment-author">李华</div>
          <div class="comment-text">有没有互联网行业的企业参加？主要招哪些岗位？</div>
          <div class="comment-time">
            <span>昨天 18:30</span>
            <span class="comment-actions">回复</span>
            <span class="comment-actions">点赞 (12)</span>
          </div>
          
          <!-- 回复列表 -->
          <div class="reply-list">
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=26" class="user-avatar" style="width: 28px; height: 28px;" alt="用户头像">
              <div class="reply-content">
                <span class="reply-author">王小明</span>
                <span class="reply-text">：有很多互联网公司，包括几家大厂，主要招开发、产品、运营等岗位。</span>
                <div class="reply-time">
                  <span>昨天 19:15</span>
                  <span class="reply-actions">回复</span>
                  <span class="reply-actions">点赞 (3)</span>
                </div>
              </div>
            </div>
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=27" class="user-avatar" style="width: 28px; height: 28px;" alt="用户头像">
              <div class="reply-content">
                <span class="reply-author">张小红</span>
                <span class="reply-text">：我也想知道有没有UI设计的岗位，有了解的吗？</span>
                <div class="reply-time">
                  <span>昨天 20:03</span>
                  <span class="reply-actions">回复</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 留言3 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=23" class="user-avatar" alt="用户头像">
        <div class="comment-content">
          <div class="comment-author">赵静</div>
          <div class="comment-text">去年参加过，规模很大，企业质量也不错，今年准备再去看看有没有合适的机会。</div>
          <div class="comment-time">
            <span>2天前</span>
            <span class="comment-actions">回复</span>
            <span class="comment-actions">点赞 (8)</span>
          </div>
        </div>
      </div>
      
      <!-- 留言4 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=24" class="user-avatar" alt="用户头像">
        <div class="comment-content">
          <div class="comment-author">陈强</div>
          <div class="comment-text">需要带什么材料吗？简历要准备多少份合适？</div>
          <div class="comment-time">
            <span>3天前</span>
            <span class="comment-actions">回复</span>
            <span class="comment-actions">点赞 (4)</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 加载更多留言 -->
    <div class="load-more">
      <button class="load-more-btn">
        <i class="fa fa-refresh"></i> 加载更多留言
      </button>
    </div>
  </div>
  
  <!-- 相关推荐 -->
  <div class="related-events">
    <h2 class="section-title">相关推荐</h2>
    <div class="related-list">
      <div class="related-item">
        <img src="https://picsum.photos/300/200?random=31" class="related-image" alt="相关招聘会">
        <div class="related-info">
          <div class="related-title">2023互联网行业专场招聘会</div>
          <div class="related-date">10月29日 10:00</div>
        </div>
      </div>
      <div class="related-item">
        <img src="https://picsum.photos/300/200?random=32" class="related-image" alt="相关招聘会">
        <div class="related-info">
          <div class="related-title">2023届高校毕业生线上双选会</div>
          <div class="related-date">10月28日 09:00</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-calendar nav-icon"></i>
      <span>招聘会</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-briefcase nav-icon"></i>
      <span>职位</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 轮播图功能
    let currentSlide = 0;
    const totalSlides = 5; // 总图片数
    const slides = [
      "https://picsum.photos/600/400?random=1",
      "https://picsum.photos/600/400?random=2",
      "https://picsum.photos/600/400?random=3",
      "https://picsum.photos/600/400?random=4",
      "https://picsum.photos/600/400?random=5"
    ];
    const carouselImage = document.querySelector('.carousel-image');
    const imageCount = document.querySelector('.image-count');
    const dots = document.querySelectorAll('.indicator-dot');
    
    // 切换轮播图
    function showSlide(index) {
      currentSlide = index;
      carouselImage.src = slides[currentSlide];
      imageCount.textContent = `${currentSlide + 1}/${totalSlides}`;
      
      // 更新指示器
      dots.forEach((dot, i) => {
        if (i === currentSlide) {
          dot.classList.add('active');
        } else {
          dot.classList.remove('active');
        }
      });
    }
    
    // 下一张
    function nextSlide() {
      let newIndex = currentSlide + 1;
      if (newIndex >= totalSlides) newIndex = 0;
      showSlide(newIndex);
    }
    
    // 上一张
    function prevSlide() {
      let newIndex = currentSlide - 1;
      if (newIndex < 0) newIndex = totalSlides - 1;
      showSlide(newIndex);
    }
    
    // 自动轮播
    let slideInterval = setInterval(nextSlide, 5000);
    
    // 点击指示器切换
    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        clearInterval(slideInterval);
        showSlide(i);
        slideInterval = setInterval(nextSlide, 5000);
      });
    });
    
    // 点击轮播图切换
    carouselImage.addEventListener('click', (e) => {
      const rect = carouselImage.getBoundingClientRect();
      const x = e.clientX - rect.left;
      
      clearInterval(slideInterval);
      if (x < rect.width / 2) {
        prevSlide();
      } else {
        nextSlide();
      }
      slideInterval = setInterval(nextSlide, 5000);
    });
    
    // 报名按钮功能
    const registerBtn = document.querySelector('.primary-btn');
    registerBtn.addEventListener('click', function() {
      if (this.innerHTML.includes('立即报名')) {
        this.classList.remove('btn-primary');
        this.classList.add('btn-success');
        this.innerHTML = '<i class="fa fa-check"></i> 已报名';
        alert('报名成功！我们会发送确认信息到您的手机');
      } else {
        this.classList.remove('btn-success');
        this.classList.add('btn-primary');
        this.innerHTML = '<i class="fa fa-calendar-plus-o"></i> 立即报名';
        if (confirm('确定要取消报名吗？')) {
          alert('已取消报名');
        } else {
          // 恢复已报名状态
          this.classList.remove('btn-primary');
          this.classList.add('btn-success');
          this.innerHTML = '<i class="fa fa-check"></i> 已报名';
        }
      }
    });
    
    // 收藏按钮功能
    const favoriteBtn = document.querySelector('.secondary-btn .fa-star-o').parentElement;
    favoriteBtn.addEventListener('click', function() {
      const icon = this.querySelector('i');
      if (icon.classList.contains('fa-star-o')) {
        icon.classList.remove('fa-star-o');
        icon.classList.add('fa-star', 'text-warning');
        alert('已收藏');
      } else {
        icon.classList.remove('fa-star', 'text-warning');
        icon.classList.add('fa-star-o');
        alert('已取消收藏');
      }
    });
    
    // 分享按钮功能
    const shareBtn = document.querySelector('.secondary-btn .fa-share-alt').parentElement;
    shareBtn.addEventListener('click', function() {
      alert('分享功能：可分享到微信、朋友圈、微博等');
    });
    
    // 更多按钮功能
    const moreBtn = document.querySelector('.secondary-btn .fa-ellipsis-v').parentElement;
    moreBtn.addEventListener('click', function() {
      alert('更多操作：举报、反馈、刷新等');
    });
    
    // 留言回复功能
    const replyButtons = document.querySelectorAll('.comment-actions, .reply-actions');
    replyButtons.forEach(button => {
      if (button.textContent.includes('回复')) {
        button.addEventListener('click', function() {
          const commentInput = document.querySelector('.comment-input');
          if (this.closest('.reply-time')) {
            const author = this.closest('.reply-content').querySelector('.reply-author').textContent;
            commentInput.value = `@${author} `;
          } else {
            const author = this.closest('.comment-content').querySelector('.comment-author').textContent;
            commentInput.value = `@${author} `;
          }
          commentInput.focus();
        });
      } else if (button.textContent.includes('点赞')) {
        button.addEventListener('click', function() {
          let countText = this.textContent;
          let count = parseInt(countText.match(/\d+/)[0]);
          
          if (this.style.color === 'rgb(227, 76, 76)') {
            // 取消点赞
            this.style.color = '';
            this.textContent = countText.replace(count, count - 1);
          } else {
            // 点赞
            this.style.color = '#e34c4c';
            this.textContent = countText.replace(count, count + 1);
          }
        });
      }
    });
    
    // 留言提交
    const commentInput = document.querySelector('.comment-input');
    commentInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        const text = this.value.trim();
        if (text) {
          alert(`已提交留言：${text}`);
          this.value = '';
        }
      }
    });
    
    // 加载更多留言
    document.querySelector('.load-more-btn').addEventListener('click', function() {
      const btn = this;
      btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        btn.innerHTML = '<i class="fa fa-refresh"></i> 加载更多留言';
        alert('已加载全部留言');
      }, 1500);
    });
  </script>
</body>
</html>
